import React, { Component, Fragment } from "react";
// antd
import { Dropdown, Menu, Table, Button, Col, Pagination, Form, Input, Select, Typography, Space, Tag, notification, Modal, message, Switch, Tooltip } from "antd";
import Action from "@c/buttonAction/Index";
import { DownOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
// http
import http from '../../../utils/request';

// ansi
import {CopyToClipboard} from 'react-copy-to-clipboard';

// import XLSX from "xlsx"
import ExportJsonExcel from "js-export-excel";
import { cmdb_sheet_filter, cmdb_sheet_header, cmdb_sheet_name, pagination_size_option } from "../../../utils/common"

import Node from "./Node"
import Pod from "./Pod"
import Log from "./Logs"
import Offline from "./Offline";

import { Tabs } from "antd";
const { TabPane } = Tabs;


const { TextArea } = Input;
const { Text } = Typography;
const { Option } = Select;

  
class Cluster extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,
            loading_ansible: false,
            loading_label: false,
            loading_edit: false,
            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_instance_region: null,
            search_instance_platform: null,
            search_instance_account_name: null,
            search_charge_type: null,
            search_common: null,
            search_option_account: [],
            search_option_platform: [],
            search_option_region: [],
            search_business: null,
            search_division: null,

            selectedRowKeys: [],
            label_list: '',

            // 业务线标签
            label_list_option: '',
            label_list_option_name: '',

            // 事业部标签
            label_division_list_option: '',
            label_division_list_option_name: '',

            visable_label: false,
            visable_label_division: false,
            visible_edit: false,

            // 容器集群
            visable_manage_k8s: false,
            kubernetes_id: null,
            kubernetes_name: null,
            kubernetes_cluster_spec: null,

            // 表格
            dataSource: [],
            columns: [
                {title: "实例ID/名称", dataIndex: "instance_id", key: "instance_id",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <CopyToClipboard text={rowData.instance_id} 
                                    onCopy={() => 
                                        this.setState({copied: true},
                                        notification.open({
                                            message: '已复制到剪贴板',
                                            icon: <CheckOutlined style={{ color: 'green' }} />,
                                            duration: 2,
                                            placement: 'top',
                                        })
                                    )}
                                >
                                    <span><span style={{marginRight: "5px"}}><CopyOutlined /></span><span style={{color: "#6587FF"}}>{rowData.instance_id}</span></span>
                                </CopyToClipboard>
                                 
                                <Text >{rowData.name}</Text>
                            </Space>
                        )
                    }
                },
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>
                            </div>
                        )
                    }
                },
                {title: "区域", dataIndex: "region", key: "region",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.region}</Tag>
                            </div>
                        )
                    }
                },
                {title: "财务", dataIndex: "division", key: "division", width: "160px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.division}</Tag>
                            </div>
                        )
                    }
                },
                {title: "告警", dataIndex: "business", key: "business", width: "160px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.business}</Tag>
                            </div>
                        )
                    }
                },
                {title: "类型", dataIndex: "resource_type", key: "resource_type",
                    render: (text, rowData) => {
                        return(
                            <div>                 
                                <Tooltip title={rowData.resource_type_name}>
                                    <Tag color="gold">{rowData.resource_type}</Tag>
                                </Tooltip>
                            </div>
                        )
                    }
                },
                {title: "地址", dataIndex: "address", key: "address",
                    render: (text, rowData) => {
                        const cluster_url_dashboard = <div>{rowData.cluster_url_dashboard ? "面: " + rowData.cluster_url_dashboard : null}</div>
                        const cluster_url_inner = <div>{rowData.cluster_url_inner ? "内: " + rowData.cluster_url_inner : null}</div>
                        const cluster_url_outer = <div>{rowData.cluster_url_outer ? "公: " + rowData.cluster_url_outer : null}</div>
                        return(
                            <div>
                                {cluster_url_dashboard}
                                {cluster_url_inner}
                                {cluster_url_outer}
                            </div>
                        )
                    }
                },
                {title: "创建时间", dataIndex: "create_time", key: "create_time"},
                {title: "付费类型", dataIndex: "charge_type", key: "charge_type",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="magenta">{rowData.charge_type}</Tag>
                            </div>
                        )
                    }
                },
                {title: "实例规格", dataIndex: "cluster_spec", key: "cluster_spec",
                    render: (text, rowData) => {
                        return(
                            <div>{rowData.cluster_spec}</div>
                        )
                    }
                },
                {title: "网络模式", dataIndex: "network_mode", key: "network_mode"},
                {title: "监控", dataIndex: "prometheus", key: "prometheus"},
                {title: "Pod", dataIndex: "subnet_cidr", key: "subnet_cidr"},
                {title: "删除保护", dataIndex: "deletion_protection", key: "deletion_protection",
                    render: (text, rowData) => {
                        return (
                            <Switch 
                                size="small" 
                                defaultChecked={rowData.deletion_protection}
                                disabled
                            />
                        )
                    }
                },
                {title: "操作", dataIndex: "operation", key: "operation", fixed: 'right',
                    render: (text, rowData) => {
                        return (
                            <div>
                                <Action.Button onClick={() => this.onManageK8sBtn(rowData)}>管理集群</Action.Button>
                                <Action.Button onClick={() => this.onMonitorK8sBtn(rowData)}>编辑</Action.Button>
                            </div>
                        )
                    }
                }
            ],
        }
        this.formRefLabel = React.createRef();
        this.formRefLabelDivision = React.createRef();
        this.formRefEdit = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
        this.loadDataBusiness()
        this.loadDataDivision()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadDataBusiness = () => {
        const requestDataBusiness = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/business', {params: requestDataBusiness}).then(response=>{
            const resp_data = response.data.data.items
            const label_list_option = []
            const label_list_option_name = []
            for (let i = 0; i < resp_data.length; i++) {
                label_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
                label_list_option_name.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)

            }
            label_list_option_name.push(<Option key='none'>空标签</Option>)
            this.setState({
                label_list_option: label_list_option,
                label_list_option_name: label_list_option_name
            })
        })
    }

    loadDataDivision = () => {
        const requestDataBusiness = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/division', {params: requestDataBusiness}).then(response=>{
            const resp_data = response.data.data.items
            const label_division_list_option = []
            const label_division_list_option_name = []
            for (let i = 0; i < resp_data.length; i++) {
                label_division_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
                label_division_list_option_name.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)

            }
            label_division_list_option_name.push(<Option key='none'>空标签</Option>)

            this.setState({
                label_division_list_option: label_division_list_option,
                label_division_list_option_name: label_division_list_option_name
            })
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'search_common__contains': this.state.search_common,
            'business': this.state.search_business,
            'division': this.state.search_division,
            'platform': this.state.search_instance_platform,
            'account_name': this.state.search_instance_account_name,
            'region': this.state.search_instance_region,
            'charge_type': this.state.search_charge_type,
        }
        // 获取database列表
        http.get('/cloud/kubernetes/list', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
        // this.loadData()
    }    

    /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_common: data.search_common,
            search_business: data.search_business,
            search_division: data.search_division,
            search_instance_platform: data.platform,
            search_instance_account_name: data.account_name,
            search_instance_region: data.region,
            search_charge_type: data.charge_type ? data.charge_type : null,
            page: 1
        })
        this.loadData()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account
                })
            })
    
            http.get('/cloud/region', {params: requestData}).then(response=>{
                const search_option_region = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_region.push(<Option key={resp_data[i].code}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_region: search_option_region
                })           
            })

        } else {
            this.setState({
                search_option_account: '',
                search_option_region: '',
            })
        }
    }

    // 搜索切换云区域
    onChangeRegion = (value) => {
        this.setState({
            search_instance_region: value ? value : null
        })
    }

    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_instance_account_name: value ? value : null
        })
    }

    // 搜索业务线
    onChangeBusiness = (value) => {
        this.setState({
            search_business: value ? value : null
        })
    }

    // 搜索事业部
    onChangeDivision= (value) => {
        this.setState({
            search_division: value ? value : null
        })
    }

    /** 编辑云资源按钮 */
    onMonitorK8sBtn = (rowData) => {
        const requestData = {'page': 1, 'limit': 1}
        http.get('/cloud/kubernetes/list', {params: requestData}).then(response=>{
            this.formRefEdit.current.setFieldsValue({
                kubernetes_id: rowData.instance_id,
                name: rowData.name
            })
        }).catch()
        this.setState({visible_edit: true})
    }

    /** 编辑云资源取消 */
    onFinishEditCancel = () => {
        this.setState({visible_edit: false})
        this.formRefEdit.current.resetFields();
    }

    /** 编辑云资源提交 */
    onFinishEdit = (data) => {
        if (data.prometheus.trim().length === 0) {
            message.error("字段不能为空")
            return 
        }
        this.setState({loading_edit: true})
        const requestData = {prometheus: data.prometheus.trim()}
        http.put('/cloud/kubernetes/obj/' + data.kubernetes_id, requestData).then(response=>{
            this.setState({loading_edit: false})
            if (response.data.return_code === 1 ) {
                message.error(response.data.msg)
                return
            }
            message.success(response.data.msg)
            this.setState({visible_edit: false})
            this.formRefEdit.current.resetFields();
            this.loadData()
        })
    }

    // 批量选中标签
    onSelectChange = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }

    // 批量打标签按钮
    onLabelBtn = () => {
        if (this.state.selectedRowKeys.length>0) {

            // 获取主机列表
            const requestData = {
                instance_id_list: this.state.selectedRowKeys,
                operation_type: 'get_list',
            }
            http.patch('/cloud/kubernetes/list', {params: requestData}).then(response=>{
                const resp_data = response.data.data
                const resp_data_2 = resp_data.join("\n")
                this.setState({
                    label_list: resp_data_2
                })

                this.formRefLabel.current.setFieldsValue({
                    label_list:  resp_data_2
                })
            }).catch()

            this.setState({
                visable_label: true,
            })
        } else {
            message.info('请先选中需要打标签的资源实例')
        }
    }

    // 批量打事业部标签
    onLabelDivisionBtn = () => {
        if (this.state.selectedRowKeys.length>0) {

            // 获取主机列表
            const requestData = {
                instance_id_list: this.state.selectedRowKeys,
                operation_type: 'get_list',
            }
            http.patch('/cloud/kubernetes/list', {params: requestData}).then(response=>{
                const resp_data = response.data.data
                const resp_data_2 = resp_data.join("\n")
                this.setState({
                    label_list: resp_data_2
                })

                this.formRefLabelDivision.current.setFieldsValue({
                    label_list:  resp_data_2
                })
            }).catch()

            this.setState({
                visable_label_division: true,
            })
        } else {
            message.info('请先选中需要打标签的资源实例')
        }
    }

    // 批量打标签任务提交
    onFinishLabel = (data) => {
        this.formRefLabel.current.resetFields()
        this.setState({
            loading_label: true
        })
        const requestData = {
            business_id: data.business_id,
            label_list: data.label_list,
            operation_type: 'change_label',
        }
        http.patch('/cloud/kubernetes/list', {params: requestData}).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading_label: false,
                visable_label: false,
                selectedRowKeys: [],
            })
            this.loadData()
        })
    }

    // 批量打事业部标签任务提交
    onFinishLabelDivision = (data) => {
        this.formRefLabelDivision.current.resetFields()
        this.setState({
            loading_label: true
        })
        const requestData = {
            division_id: data.division_id,
            label_list: data.label_list,
            operation_type: 'change_label_division',
        }
        http.patch('/cloud/kubernetes/list', {params: requestData}).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading_label: false,
                visable_label_division: false,
                selectedRowKeys: [],
            })
            this.loadData()
        })
    }

    // 批量打标签任务取消
    onFinishLabelCancel = () => {
        this.formRefLabel.current.resetFields()
        this.setState({
            visable_label: false,
            selectedRowKeys: [],
        })
    }

    // 批量打事业部标签任务取消
    onFinishLabelDivisionCancel = () => {
        this.formRefLabelDivision.current.resetFields()
        this.setState({
            visable_label_division: false,
            selectedRowKeys: [],
        })
    }    

    // 管理容器集群按钮
    onManageK8sBtn = (rowData) => {
        this.setState({
            visable_manage_k8s: true,
            kubernetes_id: rowData.instance_id,
            kubernetes_name: rowData.name,
            kubernetes_cluster_spec: rowData.cluster_spec
        })
    }

    // 管理容器集群按钮取消
    onFinishManageCancel = () => {
        this.setState({
            visable_manage_k8s: false,
        })
    }

    // 一键导出
    onexportExcelBtn = () => {
        // 不同云产品添加自定义字段
        const _cmdb_sheet_filter = cmdb_sheet_filter.concat('cluster_type', 'cluster_spec', 'subnet_cidr', 'network_mode', 'deletion_protection')
        const _cmdb_sheet_header = cmdb_sheet_header.concat('集群类型', '集群规格', '容器网络', '网络模式', '删除保护')

        let option = {}
        option.fileName = cmdb_sheet_name
        option.datas = [
            {
                sheetData: this.state.dataSource,
                sheetName: cmdb_sheet_name,
                sheetFilter: _cmdb_sheet_filter,
                sheetHeader: _cmdb_sheet_header
            }
        ]
        var toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel()
    }

    render(){
        const { loading, columns, dataSource, page, total, search_option_platform, search_option_account, search_option_region, selectedRowKeys,
                loading_label, visable_label, visable_label_division, visible_edit, label_list_option, label_list_option_name, loading_edit,
                label_division_list_option, label_division_list_option_name, visable_manage_k8s, kubernetes_id, kubernetes_name, kubernetes_cluster_spec
        } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        }

        const operations = (
            <Menu
                items={[
                    {
                        label: (
                            <Action.Button onClick={() => this.onLabelBtn()}>业务线标签</Action.Button>
                        ),
                        key: '0',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onLabelDivisionBtn()}>事业部标签</Action.Button>
                        ),
                        key: '1',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onexportExcelBtn()} >导出页面数据</Action.Button>
                        ),
                        key: '6',
                    },
                ]}
            />
        );
 
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch} size="small">
                    <Form.Item label="搜索内容" name="search_common" style={myStyleForm}>
                        <Input placeholder="实例ID/名称/IP"  />
                    </Form.Item>

                    <Form.Item label="云平台" name="platform" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>

                    <Form.Item label="云账户" name="account_name" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择云账户"
                            onChange={this.onChangeAccountName}
                            >
                            {search_option_account}
                        </Select>                      
                    </Form.Item>

                    <Form.Item label="区域" name="region" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangeRegion}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_region}
                        </Select>
                    </Form.Item>

                    <Form.Item label="业务线搜索" name="search_business" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择业务线"
                            optionFilterProp="children"
                            onChange={this.onChangeBusiness}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_list_option_name}
                        </Select>
                    </Form.Item>

                    <Form.Item label="事业部搜索" name="search_division" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择事业部"
                            optionFilterProp="children"
                            onChange={this.onChangeDivision}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_division_list_option_name}
                        </Select>
                    </Form.Item>

                    <Form.Item label="付费类型" name="charge_type" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="查询付费类型"
                            >
                            <Option key="包年包月">包年包月</Option>
                            <Option key="按量付费">按量付费</Option>
                        </Select>                      
                    </Form.Item>

                    <Form.Item shouldUpdate={true} size="small" style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}></div>
                            
                <div style={myStyle1}>
                    <Dropdown overlay={operations}>
                        <Action.Button>
                            <Space>
                                更多操作
                                <DownOutlined />
                            </Space>
                        </Action.Button>
                    </Dropdown>
                </div>

                <Table
                    size="small"
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 2500 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            pageSizeOptions={pagination_size_option}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="编辑云资源"
                    visible={visible_edit}
                    onCancel={this.onFinishEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="700px"
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRefEdit}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="实例ID" name="kubernetes_id" rules={[{ required: true}]}>
                            <Input disabled></Input>
                        </Form.Item>

                        <Form.Item label="实例名称" name="name" rules={[{ required: true}]}>
                            <Input disabled></Input>
                        </Form.Item>

                        <Form.Item label="监控地址" name="prometheus" rules={[{ required: true}]}>
                            <Input placeholder="192.168.121.222:30001"></Input>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" loading={loading_edit} type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>
                </Modal>

                <Modal
                    title="批量打标签"
                    visible={visable_label}
                    onCancel={this.onFinishLabelCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="800px"
                >
                    <Form
                        onFinish={this.onFinishLabel}
                        ref={this.formRefLabel}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="主机列表" name="label_list">
                            <TextArea disabled autoSize={true}></TextArea>
                        </Form.Item>

                        <Form.Item label="业务列表" name="business_id">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择业务线"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_list_option}
                        </Select>
                    </Form.Item>

                        <Form.Item>
                            <Button loading={loading_label} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="批量打标签"
                    visible={visable_label_division}
                    onCancel={this.onFinishLabelDivisionCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="800px"
                >
                    <Form
                        onFinish={this.onFinishLabelDivision}
                        ref={this.formRefLabelDivision}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="主机列表" name="label_list">
                            <TextArea disabled autoSize={true}></TextArea>
                        </Form.Item>

                        <Form.Item label="事业部列表" name="division_id">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择事业部"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_division_list_option}
                        </Select>
                    </Form.Item>

                        <Form.Item>
                            <Button loading={loading_label} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                  title={<div style={{ color: 'red' }} >{kubernetes_name} ({kubernetes_cluster_spec})</div>}
                  visible={visable_manage_k8s}
                  onCancel={() => this.setState({ visable_manage_k8s: false })}
                  onOk={() => this.setState({ visable_manage_k8s: false })}
                  okText="确认"
                  cancelText="取消"
                  footer={null}
                  width={2000}
                >
                    <Fragment>
                        <Tabs
                          defaultActiveKey="1" 
                        >
                            <TabPane tab="集群 Node" key="1">
                                <Node kubernetes_id={kubernetes_id} />
                            </TabPane>
                            <TabPane tab="集群 Pod" key="2">
                                <Pod kubernetes_id={kubernetes_id} />
                            </TabPane>
                            <TabPane tab="集群 日志" key="3">
                                <Log />
                            </TabPane>
                            <TabPane tab="集群 下线" key="4">
                                <Offline kubernetes_id={kubernetes_id}/>
                            </TabPane>
                        </Tabs>
                    </Fragment>
                </Modal>


            </Fragment>
        )
    }
}

export default Cluster;